<script setup>
import QRCode from 'qrcode'
import orderApis from '@/apis/order'
import { ElMessage } from 'element-plus';
import {onBeforeRouteLeave, useRoute, useRouter} from 'vue-router';

const route = useRoute();
const router = useRouter();
const success = ref(false)
const text = ref('')
const value = ref(new Date(route.query.expiredDate))
const formData = ref(null)
let intervalId;
if (route.query.payType == "WEIXIN") {
  text.value = '微信'
} else if (route.query.payType == "ALIPAY") {
  text.value = '支付宝'
}


onBeforeRouteLeave((to, from, next) => {
  // console.log('离开路由'+intervalId);
  for(let i=intervalId-50;i<intervalId+50;i++){
    clearInterval(i)
  }
  next()
})

onMounted(() => {
  let type = ''
  let obj = {}
  if (route.query.payType == "WEIXIN") {
    type = 'weixin'

  } else if (route.query.payType == "ALIPAY") {

    type = 'alipay'
    obj.aType = 'pc'
  }
  orderApis.sign({
    params: {
      type,
      orderId: route.query.id,
      paymentChannel: 'pc',
      ...obj
    },
  }).then(res => {
    // window.addEventListener('message', function (event) {
    //     console.log("event.data");
    // })
    intervalId = setInterval(() => {
      orderApis.orderDetail({
        orderId: route.query.id,
      }).then(res => {
        // console.dir(document.getElementsByClassName('iframe')[0])
        // let contentDocument=document.getElementsByClassName('iframe')[0].contentDocument;
        // let innerText=contentDocument.getElementsByClassName('mi-result-box-text')[0].innerText;
        // console.log(innerText);
        if (res.data.havePay) {
          clearInterval(intervalId)
          // 提示已支付
          success.value = true
          ElMessage({
            message: '支付成功，即将返回',
            type: 'success'
          });
          setTimeout(() => {
            router.go(-2)
          }, 2000);
        }
      }).catch(err => {
        // console.log(err)
      })

    }, 2000);
    if (route.query.payType == "WEIXIN")
      QRCode.toCanvas(document.getElementById('qrcode3'), res.data.code_url, {
        width: 280,
        height: 280,
        color: {
          dark: '#000000', // 黑色
          light: '#ffffff' // 白色
        }
      }, function (error) {
        if (error) console.error(error);
        // console.log('QR code generated successfully!');
      });
    else if (route.query.payType == "ALIPAY") {
      formData.value = res.data.body
    }
  });
})
</script>
<template>
<div class="pay-final">
  <div class="container">
    <div class="countdown-container">
      <el-countdown title="剩余支付时间" :value="value" />
    </div>
    <article class="mt20 mr20 mb20 ml20" v-if="route.query.payType == 'WEIXIN'">
      <div class="mt20 pt10 text-center">
        <span class="fs18">{{ text }}扫一扫，快捷支付 </span>
      </div>
      <!-- https://static.sieredu.com/front/web/v3/img/f-pay/wxTips-tz.jpg -->
      <div class="wxBuy__wrap" style="background-image: url()">
        <div class="canvas-container">
          <canvas width="200" id="qrcode3" height="200"></canvas>
          <div :class="{ success }" class="normal">
            <img src="@/assets/images/完成-支付完成.svg" alt="">
          </div>

        </div>
      </div>
    </article>
    <div v-else-if="route.query.payType == 'ALIPAY'" class="ALIPAY">
      <iframe class="iframe" :srcdoc="formData" frameborder="no" border="0" marginwidth="0" marginheight="0"
              height="600"  style="overflow: scroll;">
      </iframe>
    </div>
  </div>
</div>
</template>

<style  scoped>
.pay-final{
  background: url('@/assets/images/app_background.png');
  background-size: cover;
  padding: 50px 0;
}
.countdown-container{
  text-align: center;
}
.container {
  width: 1000px;
  margin: 0 auto;
  background: white;
  padding: 16px;
  border-radius: 12px;
}

.mt20 {
  margin: 20px;
}

.text-center {
  text-align: center;
}

.wxBuy__wrap {
  background: url(@/assets/images/background.png) no-repeat right 0;
  height: 420px;
  padding-right: 320px;
  width: 600px;
  margin: 50px auto;
  overflow: hidden;

}

.canvas-container {
  position: relative;
  transition: all 0.5s;
}

.normal {
  display: none;
}

.success {
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  opacity: 0.5;
  background: black;
  background-size: 100%;

}

.success>img {
  width: 100%;
  height: 100%;
}
.ALIPAY{

}
iframe{
  width: 100%;
}
</style>